<template>
  <a-modal :getContainer="getPopupContainer" v-model:open="modalShow" title="设备管理" @ok="confirmHandler">
    <div class="device-modal">
      <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys" :data-source="deviceData"
        :titles="['全部设备', '已选设备']" :render="item => item.title" :disabled="disabled" />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { defineProps, ref, watch, defineModel, onBeforeMount, defineEmits } from 'vue';
import * as Api from '@/api/videoMonitor';

const emit = defineEmits(['update']);
const props = defineProps<{
  groupId: any
}>();
const getPopupContainer = () => {
  return document.querySelector('.ant-board');
}
const modalShow = defineModel('show');

const targetKeys = ref<string[]>([]);

const selectedKeys = ref<string[]>([]);
const deviceData = ref([]);
const mockData: any = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    disabled: i % 3 < 1,
  });
}
// deviceData.value = mockData;
const getDevice = async () => {
  const res = await Api.getDevice();
  if (res) {
    const _data = res.map((item) => {
      return {
        key: item.id,
        title: item.deviceName
      }
    });
    deviceData.value = _data;
  }
}
const getGroupDevice = async () => {
  const res = await Api.getGroupDevice({
    monitorGroupId: props.groupId
  });
  if (res) {
    targetKeys.value = res.map((item) => {
      return item.id
    });
  }
}
const confirmHandler = async () => {
  const res = await Api.updateGropuDevice({
    groupId: props.groupId,
    deviceIds: targetKeys.value,
  });
  if (res) {
    emit('update');
  }
}
watch(() => [props.groupId, modalShow], () => {
  if (modalShow && props.groupId) {
    getGroupDevice();
  }
})
onBeforeMount(() => {
  getDevice();
})
</script>
<style lang="less" scoped>
.device-modal {
  display: flex;
  justify-content: center;
}
</style>